<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name=Keywords content="<%= htmlWebpackPlugin.options.keywords %>">
  <meta name=Description content="<%= htmlWebpackPlugin.options.description %>">
  <link rel="shortcut icon" href="//www.artup.com/img/logoMin.ico" type="images/x-icon" />
</head>

<body style="opacity:0;">
<div id="app">
  <unify-header></unify-header>
  <suspension class="suspend" ref="suspend" :show-height="showSuspensionHeight" @mouseleave="suspendPackUp">
    <div class="container">
      <div class="upper">
        <div class="wrapper">
          <label class="suspend-label">小时光</label>
          <label class="customization-item current"
                 @mouseover="suspendPullDown"
                 @click="suspendPullDown">颜色：{{showIs?'未选择':nowColor.name}}</label>
          <label class="suspend-label">尺寸：170×235 mm</label>
          <label class="suspend-label">页数：32页</label>
          <button class="customization-btn" @click="goEdit">开始定制</button>
        </div>
      </div>
      <div class="under">
        <div class="wrapper" style="padding-left:338px;">
          <div class="suspend-color-item"
               v-for="(item,index) in frameColor"
               :class="{active:!showIs&&nowColor.code===item.code}"
               :style="{background:item.attr}"
               @click="checkColor(index)&&suspendPackUp()">
            <label>{{item.name}}</label>
          </div>
        </div>
      </div>
    </div>
  </suspension>
  <div class="wramp">
    <div id="banner">
      <div class="container">
        <div class="div_lf">
          <img v-if="showIs" src="http://image2.artup.com/static/pc/index/img/xiaoshiguang/xiaoshiguang01.png" alt=""/>
          <img class="img_sd" v-if="!showIs" :src="picturePrefix+oSrcImg" alt=""/>
        </div>
        <div class="div_rg">
          <h5>小时光</h5>
          <span>小小的时光，记录点滴美好</span>
          <div class="color">
            <label>颜色</label>
            <ol>
              <li class="color_div"
                  @click="checkColor(index1)"
                  v-if="attributeValues.length"
                  v-for="(item,index1) in frameColor"
                  :color="item.code"
                  :name="item.name">
                <b :class="{'lines':!showIs&&nowColor.code===item.code}"
                   :style="{'background':item.attr}"></b>
                <span :class="{'span_c':nowColor.code===item.code}">{{item.name}}</span>
              </li>
            </ol>
          </div>
          <div class="previews">
            <ul>
              <li>
                <label>尺寸</label>
                <div class="cont">
                  170×235 mm
                </div>
              </li>
              <li>
                <label>页数</label>
                <div class="cont">
                  32页
                </div>

              </li>
            </ul>
          </div>
          <div class="pices">
            <i>299 </i> RMB
          </div>
          <a href="javascript:;" @click="goEdit" class="purchasing">开始定制</a>
        </div>
      </div>
    </div>
    <div class="hourslight1" ref="showSuspensionFlag">
      <div class="content">
        <div class="cont_lf">
          留存点滴记忆，书写美好人生<br/>小时光为你印出感动 ……
        </div>
        <div class="cont_rg">
          <h5>BEAUTIFUL</h5>
          <p>小小的时光，记录点滴美好</p>
        </div>
      </div>
    </div>

    <div class="hourslight2">
      <div class="content">
        <div class="cont_rg">
          <h5>COLLECTION</h5>
          <p>一本只属于宝宝的人生故事</p>
          <span>出生了 睁眼了 会笑了 满月了 百天了 会叫爸妈了 </span>
          <span>会走路了 周岁了 一辈子的 “第一次” 怎能不珍藏</span>
        </div>
      </div>

    </div>
    <div class="hourslight3">
      <div class="content">
        <div class="cont_lf">
          <h5>MAKING PROCESS</h5>
          <p>轻奢礼盒 珍藏馈赠总相宜</p>
        </div>
        <div class="cont_footer">
          边楞45°斜面设计，看得见的细节，处处让你爱不释手
        </div>
      </div>
    </div>
    <div class="hourslight4">
      <div class="content">
        <div class="cont_rg">
          <h5>MORE GIFTS</h5>
          <p>暖心套装 随时随心记录成长</p>
        </div>
        <div class="cont_footer">
          一套小时光内含一本精致书册，十张简约LOMO卡，一张主题照片
        </div>
      </div>
    </div>
  </div>
  <unify-footer></unify-footer>
</div>
</body>
</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113376322-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'UA-113376322-1')
</script>
